<!--
 * @Author: along
 * @Date: 2024-01-24 15:22:23
 * @LastEditTime: 2024-01-26 09:04:08
 * @LastEditors: along
 * @Description: 
-->
<template>
  <div class="app-amin">
    <div class="selectList">
      <div v-for="(item,index) in functionList" :key="index">
        <div
          @click="changeSelect(index)"
          class="selectItem"
          :class="isShow == index ? 'active' : ''"
        >{{ item.name }}</div>
      </div>
    </div>
    <div class="main-div">
      <div class="main" ref="chart"></div>
    </div>
  </div>
</template>
        
<script>
import * as echarts from "echarts";
export default {
  name: "MyData",
  components: { },
  props: {
    initSearchData: {
      type: Object
    },
    initData: {
      type: Object
    }
  },
  data() {
    return {
      //正在显示哪一个图标
      isShow: 0,
      functionList: [
        { name: "数控系统" },
        { name: "i/o" },
        { name: "伺服驱动" },
        { name: "电机" }
      ],
      macModelData: []
    };
  },
  mounted() {
    this.echartsInit();
  },
  watch: {
    initData() {
      this.echartsInit();
    }
  },
  methods: {
    changeSelect(index) {
      this.isShow = index;
      this.echartsInit();
    },
    echartsInit() {
      let dataList = []
      let nameList = []
      if(this.isShow == 0) {
        if(this.initData.macModel && this.initData.macModel.length > 0) {
          this.initData.macModel.forEach(item => {
            item.name = item.macModel?item.macModel:' '
            item.value = item.total
            nameList.push(item.name)
          });
          dataList = this.initData.macModel
        }
      }
      if(this.isShow == 1) {
        if(this.initData.HIO && this.initData.HIO.length > 0) {
          this.initData.HIO.forEach(item => {
            if(item.ioUnitType.length > 12) {
              item.name = item.ioUnitType.slice(0, 12)
            } else {
              item.name = item.ioUnitType?item.ioUnitType:' '
            }
            item.value = item.total
            nameList.push(item.name)
          });
          dataList = this.initData.HIO
        }
      }
      if(this.isShow == 2) {
        if(this.initData.servo && this.initData.servo.length > 0) {
          this.initData.servo.forEach(item => {
            item.name = item.servoType?item.servoType:' '
            item.value = item.total
            nameList.push(item.name)
          });
          dataList = this.initData.servo
        }
      }
      if(this.isShow == 3) {
        if(this.initData.macAxNum && this.initData.macAxNum.length > 0) {
          this.initData.macAxNum.forEach(item => {
            if(item.macAxNum == 0) {
              item.name = '0'
            } else {
              item.name = item.macAxNum?item.macAxNum:' '
            }
            item.value = item.total
            nameList.push(item.name)
          });
          dataList = this.initData.macAxNum
        }
      }

      const myChart = echarts.init(this.$refs.chart); //初始化容器
      // 饼图数据
      let data = dataList
      // data.sort((a, b) => b.value - a.value);

      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        title: {
          text: "购买客户排名"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: nameList,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            type: "bar",
            barWidth: "30%",
            data: data.map((item, index) => {
              // 为每一项指定颜色
              const gradientColor = new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: "rgb(82,168,245)" }, // 渐变色起始颜色
                  { offset: 1, color: "#fff" } // 渐变色结束颜色
                ]
              );
              return {
                value: item.value,
                name: item.name,
                itemStyle: {
                  color: gradientColor
                }
              };
            }),
            label: {
              normal: {
                show: true,//开启显示
                position: 'top',//柱形上方
                textStyle: { //数值样式
                  color: '#000'
                }
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>
<style  scoped>
.app-amin {
  flex: 1;
  width: 100%;
  height: calc(50vh - 120px);
  margin-top: 15px;
  background: #fff;
  border-radius: 15px;
  padding: 15px 0;
  display: flex;
  position: relative;
}
.main-div {
  width: 100%;
  height: 100%;
}
.main {
  width: 90%;
  height: 100%;
}
.selectList {
  position: absolute;
  right: 30px;
  top: 35px;
  z-index: 2;
  font-size: 12px;
  display: flex;
}
.selectItem {
  cursor: pointer;
  margin-right: 10px;
}

.active {
  position: relative;
  color: #1890ff;
}

.active::after {
  content: "";
  position: absolute;
  bottom: -5px; /* 设置下方边距 */
  left: 0;
  width: 100%;
  height: 2px; /* 设置线的高度 */
  background-color: #1890ff; /* 设置线的颜色 */
}
</style>